<div class="seller-wrap p-3 mt-4 d-inline-block d-flex justify-content-between align-items-center">
  @php
  $seller = $product['seller'];
  @endphp
  @if ($seller)
    <div class="d-flex align-items-center">
      <a class="store-name d-flex align-items-center" href="{{ $seller['id'] ? shop_route('seller.home.index', $seller['id']) : '/' }}">
        <img src="{{ image_resize($seller['logo'] ?? '', 100, 100) }}" class="img-fluid wh-40 rounded-circle border border-1">
        <span class="ms-2 fw-bold fs-5">{{ $seller['store_name'] }}</span>
      </a>
      @if ($seller['settings']['customer_service_link'] ?? false)
      <div class="contact-us-btn d-flex align-items-center ms-4">
        <a class="btn btn-outline-secondary btn-show-shop btn-sm d-flex align-items-center" href="{{ $seller['settings']['customer_service_link'] }}" target="_blank"><img src="{{ $seller['settings']['customer_service_icon'] }}" class="me-2 img-fluid">{{ __('MultiSeller::common.contact_us') }}</a>
      </div>
      @endif
    </div>
    <div class="d-flex align-items-center">
      @if ($seller['settings']['customer_service_qrcode'] ?? false)
        <div class="qrcode-wrap lh-1 position-relative">
          <div class="code-img"><img src="{{ $seller['settings']['customer_service_qrcode'] }}" class="img-fluid"></div>
          <span class="code-icon"><i class="bi bi-qr-code"></i></span>
        </div>
      @endif
      @if ($seller['id'])
        <a class="btn btn-outline-secondary btn-sm btn-show-shop ms-3" href="{{ shop_route('seller.home.index', $seller['id']) }}"><i class="bi bi-shop"></i> {{ __('MultiSeller::common.enter_shop') }}</a>
      @endif
    </div>
    @else
    <div class="store-self fs-5"><i class="bi bi-shop"></i> {{ __('MultiSeller::common.self') }}</div>
  @endif
</div>

@push('add-scripts')
<style>
  .seller-wrap {
    position: relative;
    border-radius: 10px;
    box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05)!important;
  }

  .seller-wrap::after {
    background-color: #4991f4;
    background: repeating-linear-gradient(-45deg,#d60404,#d60404 10px,#fff 0,#fff 20px,#4991f4 0,#4991f4 30px,#fff 0,#fff 40px);
    content: "";
    width: 100%;
    left: 0;
    position: absolute;
    top: -1px;
    height: 3px;
  }

  .store-name {
    color: #333;
    text-decoration: none !important;
  }

  .store-self {
    color: #666;
  }

  .btn-show-shop {
    border-color: #ddd;
  }

  .contact-us-btn a {
    border-radius: 2px;
  }

  .contact-us-btn a:hover {
    color: #fff;
  }

  .contact-us-btn a img {
    width: 20px;
  }

  .qrcode-wrap:hover .code-img {
    display: block;
  }

  .qrcode-wrap .code-img {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 200px;
    margin-top: 10px;
    z-index: 9;
    transform: translate(-50%, -12px);
    border: 1px solid #6c757d;
    border-radius: 4px;
    background: #fff;
    padding: 4px;
  }

  .qrcode-wrap .code-img::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #6c757d transparent transparent transparent;
  }

  .code-icon {
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: #333;
    border: 1px solid #ddd;
    padding: 2px 6px;
  }

  .code-icon:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
  }
</style>
@endpush
